<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import request from '../../utils/request'


let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)

const logList = ref([{}])

function handleSizeChange() {
  search()
}

function handleCurrentChange() {
  search()
}


async function search() {
  await request.get(`/log/page?page=${currentPage.value}&pageSize=${pageSize.value}`).then((result) => {
    if (result.code == 1) {
      total.value = result.data.total
      logList.value = result.data.rows
    }
  }).catch((error) => {
    ElMessage.error(error.message)
  })
}
onMounted(() => {
  search()
})
</script>

<template>
  <h2>日志管理</h2>
  <!-- 日志列表 -->
  <div class="log-management">
    <el-table class="el-table" :data="logList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="operateEmpName" label="操作人" width="100" align="center" />
      <el-table-column prop="operateTime" label="操作时间" width="300" align="center" />
      <el-table-column prop="className" label="类名" width="200" align="center" />
      <el-table-column prop="methodName" label="方法名" width="300" align="center" />
      <el-table-column prop="costTime" label="操作耗时(ms)" width="120" align="center" />

      <el-table-column prop="methodParams" label="请求参数" width="150" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>{{ scope.row.methodParams }}</div>
            </template>
            <template #reference>
              <el-tag style="width: 100px; height: 30px;" type="success">
                <el-icon>
                  <View />
                </el-icon>
                请求参数
              </el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="returnValue" label="返回值" style="width: 100%" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>{{ scope.row.returnValue }}</div>
            </template>
            <template #reference>
              <el-tag style="width: 100px; height: 30px;" type="waring">
                <el-icon>
                  <View />
                </el-icon>
                返回值
              </el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页条 -->
  <div class="log-dialog">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
      :background="background" layout="sizes, total, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<style scoped>
.log-management {
  margin: 20px;
}

/* 表格边框加粗 - 使用更明显的颜色和宽度 */
:deep(.el-table) {
  border: 2px solid #d1d5da !important;
}

/* 加粗表格内部边框 - 使用更明显的颜色和宽度 */
:deep(.el-table td),
:deep(.el-table th) {
  border: 1px solid #dbe0e4 !important;
}

/* 表头边框可以更粗一些 */
:deep(.el-table th) {
  background-color: #eaebee !important;
  border-bottom: 2px solid #dee2e6 !important;
}
</style>